<template>
    <div>
<h1>显示</h1>
<table class="table table-bordered">
        <tbody>
            <tr>
                <td>ID</td>
                <td>酒店名称</td>
                <td>手机号</td>
                <td>图片</td>
                <td>地址</td>
                <td>宴会名称</td>
            </tr>
            <tr>
                <td>{{ data.Id }}</td>
                <td>{{ data.ShopName }}</td>
                <td>{{ data.Phone }}</td>
                <td>{{ data.Photo }}</td>
                <td>{{ data.Address }}</td>
                <td>{{ data.TeSeName }}</td>
            </tr>
            <tr>
                <td>{{ data1.Id }}</td>
                <td>{{ data1.ShopName }}</td>
                <td>{{ data1.Phone }}</td>
                <td>{{ data1.Photo }}</td>
                <td>{{ data1.Address }}</td>
                <td>{{ data1.TeSeName }}</td>
            </tr>
            <tr>
                <td>{{ data2.Id }}</td>
                <td>{{ data2.ShopName }}</td>
                <td>{{ data2.Phone }}</td>
                <td>{{ data2.Photo }}</td>
                <td>{{ data2.Address }}</td>
                <td>{{ data2.TeSeName }}</td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="修改" class="btn btn-success" @click="update">
                    <input type="button" value="删除" class="btn btn-danger">
                </td>
            </tr>
        </tbody>
</table>
<h1>欢迎注册博客园成员</h1>
<table class="table table-bordered">
    <tbody>
    <tr>
        <td>用户名</td>
    <td>
        <input type="text" v-model="add.name">
    </td>
    </tr>
    
    <tr>
        <td>密码</td>
        <td><input type="password" v-model="add.pwd"></td>
    </tr>
    <tr>
        <td>确认密码</td>
        <td><input type="password" v-model="add.pwds"></td>
    </tr>
    <tr>
        <td>请选择城市</td>
        <td>
            <select v-model="add.city">
                <option value="">请选择</option>
                <option v-bind:value="item.id"  v-for="item in citys":key="item.id">{{ item.name }}</option>
            </select>
        </td>>
    </tr>
    <tr>
        <td>请选择性别</td>
        <td>
            <input type="radio" name="sex" value="男" v-model="add.sex">男
            <input type="radio" name="sex" value="女" v-model="add.sex">女
            <input type="radio" name="sex" value="不好说" v-model="add.sex">不好说
        </td>
    </tr>
    <tr>
        <td>请选择职业</td>
        <td>
            <input type="radio" name="xue" value="学生" v-model="add.xue">学生
            <input type="radio" name="xue" value="教师" v-model="add.xue">教师
            <input type="radio" name="xue" value="其他" v-model="add.xue">其他
         
        </td>
    </tr>
    <tr>
        <td>请选择爱好</td>
        <td>
            <input type="checkbox" name="qiu" value="打篮球" v-model="add.qiu">打篮球
            <input type="checkbox" name="qiu" value="跑步" v-model="add.qiu">跑步
            <input type="checkbox" name="qiu" value="阅读" v-model="add.qiu">阅读
            <input type="checkbox" name="qiu" value="上网" v-model="add.qiu">上网
        </td>
    </tr>
    <tr>
        <td>备注</td>
        <td>
            <textarea rows="2" cols="10" v-model="add.zhu">

            </textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="提交" @click="tian">
            <input type="button" value="重置">
        </td>
    </tr>
       
</tbody>
</table>


    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
let data = ref(
    {
      Id: 1,
      ShopName: "北京如家酒店",
      Phone: "18888888888",
      Photo: "https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",
      Address: "北京昌平202",
      TeSeName: "豪华婚宴"
    })
let data1=ref({
    Id: 2,
      ShopName: "北京汉庭酒店",
      Phone: "18899988888",
      Photo: "https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",
      Address: "北京昌平201",
      TeSeName: "豪华婚宴"
})
let data2=ref({
    Id: 3,
      ShopName: "北京花儿顿酒店",
      Phone: "188777888866",
      Photo: "https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
      Address: "北京昌平208",
      TeSeName: "豪华婚宴"
   
})
let citys=ref([
    {id:1,name:'北京'},
    {id:2,name:'天津'},
    {id:3,name:'上海'},
    {id:4,name:'河北'},
    {id:5,name:'山西'},
    {id:6,name:'山东'},
]
)
let add=ref({
    name:'',
    pwd:'',
    pwds:'',
    city:'',
    sex:'',
    xue:'',
    qiu:[],
    zhu:''
})
const tian=()=>{
    console.log(add);
}
const update=()=>{
    data1.value.ShopName="abc";
}

</script>

<style scoped>

</style>